<template>
  <div class="box">
      <MyMtHeader titleText="常用联系人"/>
      <div class="middle">
            <van-radio-group v-model="radio">
                <mt-cell v-for="(item,index) in list" :key="index" :class=" radio === index ? 'active' : ''">
                    <i class="van-icon van-icon-edit van-address-item__edit"> </i>
                        <van-radio :name="index" checked-color="#ee0a24"></van-radio>
                    <div class="value">
                        <p>{{item.name}}，{{item.phone}}</p>
                        <p>{{item.address2}}</p>
                    </div>
                </mt-cell>
            </van-radio-group>
      </div>
      <div class="footer">
          <mt-button @click="$router.push('/personal/address')" type="danger">新增地址</mt-button>
      </div>
  </div>
</template>

<script>
import MyMtHeader from '../MyMtHeader/MyMtHeader.vue'
export default {
    components: { MyMtHeader },
    data(){
        return {
            radio:0,
            list:[
                {
                    name:'小明',
                    phone:'12312341234',
                    address2:'北京市-北京市-东城区-撒旦'
                },
                {
                    name:'小叶',
                    phone:'12312341234',
                    address2:'北京市-北京市-东城区-撒旦'
                },
            ]
        }
    },
    created(){
        this.$EventBus.$on('addInfo',({username,phone,province,address})=>{
            let str = ''
            province.split('/').forEach(item => {
                str += item +'-'
            });
            str += address
            this.list.push({
                name:username,
                phone,
                address2:str
            })
        })
    },
}
</script>

<style scoped>
.box{
    position: relative;
    height: 100vh;
    background: #e7e8e861;
}
.mint-header{
    height: 6vh;
}
.middle{
    height: 88vh;
    overflow: hidden;
    margin-bottom: 6vh;
    overflow-y: scroll;
}
.footer{
    height: 6vh;
}
.mint-cell{
    border-bottom: 1px solid #eee;
}
.middle >>> .mint-cell-wrapper{
    position: relative;
    margin: 5px 0px;
}
.van-radio{
    position: absolute;
    left: 10px;
}
.mint-checklist >>> .mint-cell-title{
    margin-bottom: 10px;
}

.value{
    position: absolute;
    left: 50px;
    text-align: left;
    height: 50px;
}
.value > P{
    margin: 8px 0px;
    font-size: 12px;
    color: #323232;
}
.footer{
    position:absolute;   
    bottom: 0px;
    left: 0px;
    width: 100%;
}
.mint-button{
    width: 100%;
}

.active{
    background: antiquewhite;
}

</style>